<template>
    <div class="find-music-topper-container">
        <topper-btn v-for="item of topperBtn.arr"
                    :key="item"
                    :name="item.name"
                    :checked="item.checked"
                    @changeTopper="changeTopper"></topper-btn>
    </div>
</template>

<script>
import topperBtn from "./topper/topperBtn.vue";
import {reactive} from "vue";
export default {
    name: "topper",
    props:['arr'],
    components:{
        topperBtn
    },
    setup(props) {
        let topperBtn = reactive({
            arr:props.arr
        })

        function changeTopper(value) {
            topperBtn.arr.forEach(item=>{
                if (item.name === value) {
                    item.checked = true
                } else {
                    item.checked = false
                }
            })
        }

        return {
            topperBtn,
            changeTopper
        }
    }
}
</script>

<style scoped>
.find-music-topper-container {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
}
</style>